<template>

  <div class="subtitle">
    <div
        :class="[active === index ? 'text-active' : '', 'text']"
        v-for="(item, index) in tabs"
        @click="handleTabsClick(index)"
    >{{ item }}</div>
    <div class="desc" v-if="desc.length > 0">{{desc}}</div>
  </div>
</template>

<script>
export default {
  name: "Subtitle",
  props: {
    tabs: Array,
    desc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
    handleTabsClick (index) {
      this.active = index
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped>
.subtitle {
  font-size: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #0068B5;
  margin-bottom: 24px;
  display: flex;
}
.subtitle > .text {
  color: #666666;
  margin-right: 40px;
  cursor: pointer;
}
.subtitle > .text-active {
  font-weight: bold;
  color: #0068B5;
}
.desc {
  font-size: 14px;
  font-weight: normal;
  padding-top: 20px;
  color: #999999;
}
</style>
